<template>
	<view class="pay-money" >
		<!-- 列表 -->
		<view class="history-box" v-for="(item,index) in dataList" :key="index">
			<view class="box-content" >
				<image :src="item.url" ></image>
				<view class="box-msg">
					<view class="msg-sp" >
						姓名：<span>{{item.name}}</span>
					</view>
					<view class="msg-sp" >
						入馆日期：<span>{{item.time}}</span>
					</view>
					<view class="msg-sp" >
						所在馆区：<span>{{item.area}}</span>
					</view>
				</view>
				<span class="box-btn">{{item.peoples ? '本人选购':'好友选购'}}</span>
			</view>
			<view class="btns-div" >
				<view>
					<view class="msg-sp" >
						购买服务：<span>{{item.buy}}</span>
					</view>
					<view class="msg-sp" >
						到期日期：<span>{{item.endTime}}</span>
					</view>
				</view>
				<span class="xuFei" >续费</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{
						url:'../../../static/uview/common/z_people.png',
						name:'张忠良',
						num:'AZX001',
						time:'2019-03-01',
						area:'金吉镇-B区-1排-20号',
						peoples:true,
						buy:'3年',
						endTime:'2021-05-06 17:45'
					},
					{
						url:'../../../static/uview/common/z_people.png',
						name:'王善民',
						num:'AZX001',
						time:'2019-01-20',
						area:'蒼榕镇-C区-1排-20号',
						peoples:false,
						buy:'3年',
						endTime:'2021-05-06 17:45'
					}
				]
			};
		},
		
		methods:{
			handSearch(value){
				console.log(value)
			}
		}
	}
</script>

<style lang="less">
.pay-money{
	font-size: 28upx;
	position: relative;
	
	.history-box{
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		.box-content{
			display: flex;
			padding-left:20upx;
			padding-right:30upx;
			padding-bottom: 10upx;
			border-bottom: 2upx solid #e4e4e4;
			image{
				width: 130upx;
				height: 150upx;
				border: 10upx solid #7f4c12;
				border-radius: 16upx;
			}
			.box-msg{
				flex: 1;
				margin-left: 14upx;
				padding-top: 8upx;
				.msg-sp{
					color: #000000;
					margin-bottom: 20upx;
					span{
						font-weight: bold;
					}
				}
			}
			.box-btn{
				position: absolute;
				top: 18upx;
				right: 0;
				font-size: 28upx;
				color: #181818;
				padding: 4upx 24upx 4upx 28upx;
				border:1upx solid #181818;
				border-radius: 40upx 0 0 40upx;
			}
		}
		.btns-div{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 20upx 10upx 20upx;
			margin: 20upx 0 10upx 0;
			border-bottom: 8upx dashed #d7d7d7;
			.msg-sp{
				color: #000000;
				margin-bottom: 20upx;
				span{
					font-weight: bold;
				}
			}
			.xuFei{
				border-radius: 6upx;
				padding: 10upx 44upx;
				color: #fff0f3;
				background: #f5942b;
				position: relative;
				top: -20upx;
			}
		}
	}
}
</style>
